<script lang="ts" setup>
import useVueTabs from "../VueTabs/hooks/useVueTabs";
defineProps({
  item: {
    type: [Object, Array]
  }
});
const { activeName } = useVueTabs(false);
const disabledPull = ref(activeName.value != 2);
const refreshing = ref(false);
const onRefresh = async () => {
  const timer = setTimeout(() => {
    refreshing.value = false;
    clearTimeout(timer);
  }, 300);
};
function loadArticle() {
  console.log("loadArticle...");
}
const modules: any = import.meta.glob("./components/**/index.vue", {
  eager: true
});
const cmpts: Record<string, any> = {};
const numToName: any = {
  0: "Home",
  1: "TimeTable",
  2: "News"
};
Object.keys(modules).forEach(key => {
  const parts = key.split("/");
  const folderName = parts[parts.length - 2]; // 获取文件夹名
  if (folderName.startsWith("Main")) {
    cmpts[folderName] = modules[key].default;
  }
});
const currentCmpt = shallowRef("MainHome");
watchEffect(() => {
  currentCmpt.value = `Main${numToName[activeName.value]}`;
});
</script>
<template>
  <div :class="[]">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      success-duration="500"
      animation-duration="300"
      head-height="50"
      pull-distance="50"
      :disabled="disabledPull"
    >
      <template #loosing>
        <div
          class="translate-y-[-10px] text-size-14 font-weight-500 color-[#DFDFDF]"
        >
          Release to refresh...
        </div>
      </template>
      <template #loading>
        <div class="translate-y-[-10px]">
          <PullRefresh v-model:refreshing="refreshing" />
        </div>
      </template>
      <template #success>
        <div
          class="translate-y-[-10px] text-size-14 font-weight-500 color-[#DFDFDF]"
        >
          10 new recommendations for you
        </div>
      </template>
      <template #default>
        <component
          :is="cmpts[currentCmpt]"
          :data="{
            id: currentCmpt
          }"
        />
        <LoadMore
          v-if="activeName != 1"
          status="loading"
          @loadmore="loadArticle"
        />
      </template>
    </van-pull-refresh>
  </div>
</template>
<style lang="scss" scoped></style>
